<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 失去焦点事件 @blur -->
        <input type="text" @blur="inpBlur" v-model="userName">

        <span v-show="visible">该用户已经被注册,请换一个名称</span>
    </div>

    <script src="js/vue.js"></script>
    <script>
        let myApp = new Vue({
            el:'#app',
            data:{
                nameList:['admin','tom','bob'],
                userName:'',
                visible:false
            },
            methods:{
                inpsBlur(){
                    console.log('input失去焦点')
                    console.log(this.userName)
                    //includes
                    //some
                    //every
                    let result = this.nameList.some(item => {
                        return item === this.userName
                    })
                    if(result){
                        this.visible = true
                    }else{
                        this.visible =false
                    }
                    console.log(result)
                }
            }
        })
    </script>
</body>
</html>